<template>
    <el-main>
        <el-row :gutter="20">
            <el-col :span="2" class="mian-aside">
                <el-card class="box-card" style="min-height: 200px;">
                    <span @click="getMessages('message')" :class="urltype==='message' ? 'message-tip-check' : 'message-tip'"
                        title="最新未读"><i class="el-icon-bell" style="color: #E6A23C;font-size: 20px;"></i></span>
                    <el-divider></el-divider>
                    <span @click="getMessages('readed')" :class="urltype==='readed' ? 'message-tip-check' : 'message-tip'"
                        title="已读"><i class="el-icon-chat-line-round" style="color: #67C23A;font-size: 20px;"></i></span>
                    <el-divider></el-divider>
                    <span @click="getMessages('deleted')" :class="urltype==='deleted' ? 'message-tip-check' : 'message-tip'"
                        title="已删除"><i class="el-icon-delete-solid" style="color: #F56C6C;font-size: 20px;"></i></span>
                    <el-divider></el-divider>
                    <span @click="getMessages('sended')" :class="urltype==='sended' ? 'message-tip-check' : 'message-tip'"
                        title="我发送的"><i class="el-icon-s-promotion" style="color: #909399;font-size: 20px;"></i></span>
                    <el-divider></el-divider>
                    <span @click="getMessages('system')" :class="urltype==='system' ? 'message-tip-check' : 'message-tip'"
                        title="系统信息"><i class="el-icon-s-opportunity" style="color: #409EFF;font-size: 20px;"></i></span>
                    <el-divider></el-divider>
                </el-card>
            </el-col>
            <el-col :span="22">
                <el-card class="box-card" style="min-height: 13.75rem;">
                    <avue-crud ref="crud" :data="messageListData" :option="option" :page="page" @refresh-change="refresh"
                        @size-change="sizeChange" @current-change="currentChange" :row-style="rowClassName"
                        @expand-change="expandChanges">
                        <template slot-scope="scope" slot="menu" v-if="urltype !== 'sended'">
                            <el-button :size="scope.size" :type="scope.type" v-if="scope.row.status === 0" @click="handleStatus(scope.row, 1)">标为已读</el-button>
                            <el-button :size="scope.size" :type="scope.type" v-if="scope.row.status === 0 || scope.row.status === 1"
                                @click="handleStatus(scope.row, 2)">删除</el-button>
                            <el-button :size="scope.size" :type="scope.type" v-if="scope.row.status === 1" @click="handleStatus(scope.row, 0)">标为未读</el-button>
                        </template>
                        <template slot="expand" slot-scope="{row}">
                            <avue-article :option="messageDetailOption" :data="messageDetailData"></avue-article>
                        </template>
                    </avue-crud>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    export default {
        data() {
            return {
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
                urltype: 'message',
                messageListData: [],
                option: {
                    expand: true,
                    expandRowKeys: [],
                    idKey: 'id',
                    page: true,
                    align: 'center',
                    menuAlign: 'center',
                    size: 'small',
                    addBtn: false,
                    delBtn: false,
                    editBtn: false,
                    viewBtn: false,
                    searchBtn: false,
                    searchShow: false,
                    filterBtn: false,
                    columnBtn: false,
                    column: [{
                        label: '发件人',
                        prop: 'from_name',
                        span: 24,
                    }, {
                        label: '内容',
                        prop: 'content',
                        span: 24,
                        overHidden: true,
                    }, {
                        label: '时间',
                        prop: 'created_at',
                        span: 24,
                    }]
                },
                messageDetailOption: {
                    props: {
                        title: 'title',
                        meta: 'meta',
                        body: 'body'
                    },
                },
                messageDetailData: [],
            }
        },
        created() {
            this.getMessageList()
        },
        methods: {
            getMessages(type) {
                this.urltype = type
                this.getMessageList()
            },
            // 分页
            sizeChange(val) {
                this.page.currentPage = 1
                this.page.pageSize = val
                this.getMessageList()
            },
            // 当前页
            currentChange(val) {
                this.page.currentPage = val
                this.getMessageList()
            },
            // 刷新
            refresh() {
                this.getMessageList()
            },
            rowClassName({
                row,
                column,
                rowIndex
            }) {
                if (row.status === 0) {
                    return {
                        fontWeight: 'bold',
                        fontSize: '20'
                    }
                } else if (row.status === 2) {
                    return {
                        color: '#efa096',
                        fontSize: '20'
                    }
                }
            },
            expandChanges(row, expendList) {
                if (expendList.length) {
                    this.option.expandRowKeys = []
                    this.messageDetailData = []
                    if (row) {
                        this.option.expandRowKeys.push(row.id)
                        this.messageDetailData = {
                            title: "来自用户【" + row.from_name + "】的消息",
                            meta: (row.is_system === 1 ? "[系统消息]" : row.from_name) + " / " + row.created_at,
                            body: row.content
                        }
                    }
                } else {
                    this.option.expandRowKeys = []
                    this.messageDetailData = []
                }

                // if (row.status === 0 && (this.urltype === 'message' || this.urltype === 'system')) {
                //     this.handleStatus(row, 1)
                // }
            },
            getMessageList() {
                const _this = this
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getListMessage + _this.urltype, _this.qs.stringify(params)).then((
                    res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.messageListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.messageListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.messageListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.messageListData = []
                    _this.page.total = 0
                })
            },
            handleStatus(row, status) {
                const params = {
                    id: row.id
                }
                var url;
                if (status === 0) {
                    url = 'tomessage';
                } else if (status === 1) {
                    url = 'toread';
                } else {
                    url = 'todelete';
                }

                this.handleAxiosFun(this.$API.ZHIHUAPI.configMessage + url, params)
            },
            handleAxiosFun(url, params, done, loading) {
                const _this = this
                _this.axios.post(url, _this.qs.stringify(params)).then((res) => {
                    if (res.data.code === 10000) {
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'success'
                        })
                        _this.refresh()
                        if (done) {
                            done()
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'error'
                        })
                        if (loading) {
                            loading()
                        }
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    if (loading) {
                        loading()
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .message-tip {
        cursor: pointer;
        /* border: 1px solid #fcc3c3; */
    }

    .message-tip-check {
        cursor: pointer;
        border: 1px solid #fcc3c3;
        background: rgba(0, 0, 0, .1);
    }
</style>
